<%@ page import="com.foodie.service.UserService" %>
<%@ page import="com.foodie.entity.User" %><%--
  Created by IntelliJ IDEA.
  User: 我是你爸爸
  Date: 2021/6/2
  Time: 18:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<script src="<%=request.getContextPath()%>/js/jQuery.js"></script>
<!-- 引入 layui.css -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.7/dist/css/layui.css">
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.6.7/dist/layui.js"></script>
<head>
    <title>Title</title>
</head>

<style>
    * {
        margin: 0;
        padding: 0;
    }


    .box {
        padding: 5px;
        background-color: #e5f1ee;
        margin: 10px 10px;
        display: inline-block;
        width: 227px;
        height: 302px;
        box-shadow: gray 0px 0px 10px;
    }

    .img {
        width: 100%;
        height: 100%;
    }


</style>
<body>

<div style="display: flex; background-color: #393D49">
    <div style="flex:2"></div>
    <div style="flex:6">
        <ul class="layui-nav" lay-filter="">
            <li class="layui-nav-item"><a href="<%= request.getContextPath()%>/ces.jsp">首页</a></li>
            <li class="layui-nav-item "><a href="">寻找菜谱</a></li>
            <li class="layui-nav-item"><a href="<%=request.getContextPath()%>/upload.jsp">发布菜谱</a></li>
            <li class="layui-nav-item" style="position: relative;right: 20px">
                <a href="javascript:;"><div><%
                    Cookie[] cookies = request.getCookies();
                    String token = null;
                    if (cookies != null) {
                        for (Cookie cookie : cookies) {
                            if (cookie.getName().equals("token")) {
                                token = cookie.getValue();
                            }
                        }
                    }
                    if (token == null) {
                        out.print("<span onclick=\"location.href = 'login.jsp'\">登录</span>");
                    } else {
                        UserService userService = new UserService();
                        User user = userService.getUserByToken(token);
                        out.print("<span>" + user.getName() + "</span>");
                    }
                %></div></a>
                <dl class="layui-nav-child"> <!-- 二级菜单 -->
                    <dd><a href="">个人中心</a></dd>
                    <dd><a href="<%= request.getContextPath()%>/login.jsp">退出</a></dd>
                </dl>
            </li>
        </ul>
    </div>
    <div style="flex:2"></div>
</div>
<div style="display: flex;text-align: center">
    <div style="flex: 1"></div>
    <div style="flex: 8" style="flex: 1" id="menu"></div>
    <div style="flex: 1"></div>
</div>
<%@include file="currency/base.jsp" %>
</body>
<style>

</style>
<script>
    function whole() {
        // 连接Ajax
        $.ajax({
            url: '<%=request.getContextPath()%>/cre',
            type: 'GET',
            success: function (res) {
                for (var i = 0; i < res.length; i++) {
                    console.log(res);
                    $('#menu').append(`
    <div class="box">
     <div style="height: 200px" ;border: 1px solid red><img class="img" src="${res[i].IMAGE}" alt=""></div>

        <div style=" position: relative;"> <span style="position: absolute;top: 1px;left:1px ;">简介：</span><br>${res[i].MENU_INTRODUCE}</div>
        <div style="position: relative;top: 26px">

            <div id="nav" style="display: flex">
                <div class="nav-bonn" style="flex: 1">菜品名:</div>
                <div class="nav-bonn" style="flex: 1">作者:</div>
                <div class="nav-bonn" style="flex: 1">浏览量:</div>
            </div>
            <div id="xxx" style="display: flex">
                <div class="nav-top" style="flex: 1">${res[i].MENU_NAME} </div>
                <div class="nav-top" style="flex: 1">${res[i].USER_NAME}</div>
             <div class="nav-top" style="flex: 1">${res[i].VIEW}</div>
         </div>
     </div>
    </div>`)
                    if ((i+1) % 4 == 0) {
                        $('#menu').append(`
                <br>
                `)

                    }

                }
            }
        })
    }
    ;
    whole();
    layui.use('element', function () {
        var element = layui.element;
    });
</script>
</html>
